<!-- 快捷生成：英文 ！+回车 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Html Leaning</title>
</head>

<body>

    <h1>Html 学习 (h1)</h1>
    <h3 style="background-color: aquamarine;">一、普通标签(h3：标题)</h3>
    <hr>
    <p style="background-color: aquamarine;">段落 （p）</p>
    <p>段落标签 <strong>加粗</strong> <i>斜体</i> <u>横线</u> <b>加粗</b></p>

    <ul>
        <li>无序列表</li>
        <li>无序列表</li>
        <li>无序列表</li>
    </ul>

    <ol>
        <!-- Mac 多行选中快捷键 shift + option -->
        <li>有序列表</li>
        <li>有序列表</li>
        <li>有序列表</li>
    </ol>
    <p> tr 表格行 th 表格标题 td 表格内容</p>
    <table border="1">

        <tr>
            <th>表格标题1</th>
            <th>表格标题2</th>
        </tr>
        <tr>
            <td>表格内容1</td>
            <td>表格内容2</td>
        </tr>
        <tr>
            <td>表格内容1</td>
            <td>表格内容2</td>
        </tr>
    </table>

    <h3 style="background-color: aquamarine;">二、属性</h3>
    <!-- 属性名不区分大小写，属性要区分大小写(如图片，window、Mac系统本身不区分大写，所以可以通过错乱大小的地址找到图片，但上线后一般是在Linux系统的) -->

    <a href="https://www.baidu.com" target="_blank">（_blank新窗口）百度</a>
    <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度图片" width="200px"
        height="100px">
    <img src="/vs_code/day1/images/ns01.jpeg" alt="图片异常">
    <img src="/vs_code/day1/images/NS01.jpeg" alt="图片异常">
    <span>other</span>
    <img src="/vs_code/day1/images/NS0111.jpeg" alt="图片异常">
    <h3 style="background-color: aquamarine;">三、表单</h3>

    <form action="https://www.baidu.com" method="get">
        <!-- for 点击后焦点聚焦到对应id的标签 -->
        <label for="username">用户名：</label>
        <input id="username" type="text" name="username" value="123" readonly><br>
        密码：<input type="password" name="password" value="123"><br>
        性别：<input type="radio" name="sex" value="male">男
        <input type="radio" name="sex" value="female"> 女 <br>
        爱好
        <input type="checkbox" name="hobby" value="1">篮球
        <input type="checkbox" name="hobby" value="2">足球
        <input type="checkbox" name="hobby" value="3"> 羽毛球<br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

    <h3 style="background-color: aquamarine;">四、行内、块级标签</h3>
    <p>行内标签：a、span、img、input、strong、em、u、b</p>
    <p>块级标签：div、p、h1-h6、ul、ol、li、table、tr、td、th</p>
    <p>行内元素和块级元素的区别：行内元素不会自动换行，块级元素会自动换行</p>
    <p>行内元素和块级元素可以相互转换：display: inline; display: block;</p>
    <p>行内元素和块级元素可以相互转换：display: inline-block;</p>
    <p>行内元素和块级元素可以相互转换：display: flex;</p>

    <div class="nav">容器、盒子
        <a href="">链接1</a>
        <a href="">链接2</a>
    </div>
    <hr>
    <div class="content">
        <h4>文章标签</h4>
        <p>内容p
            <span>内容span1</span>
            <span>内容span2</span>
            <span>内容span3</span>
        </p>
        <p>内容p2
            <span>内容span1</span>
            <span>内容span2</span>
            <span>内容span3</span>
        </p>
    </div>
    <p>注释：快捷键：ctrl + /</p>
</body>

</html>